//页面渲染配置相关 如表单组件
export default {
	main(tree) {
		const area2 = tree.initArea({
			title: 'vIf 组件移除新增',
		});
		area2.add(
			area2.jsSwitch({
				label: '显示切换',
				name: 'demo2-1',
				placeholder: '通过vIf属性控制组件的显示',
				initValue: true,
				watch: (nValue, oValue, { items }) => {
					items['demo2-2'].vIf = nValue
				}
			}),
			area2.jsInput({
				label: '受控组件',
				name: 'demo2-2'
			})
		)
		// ===============================
		const area3 = tree.initArea({
			title: 'vShow 组件隐藏显示',
		});
		area3.add(
			area3.jsSelect({
				label: '显示切换',
				name: 'demo3-1',
				placeholder: '通过vShow属性控制组件的显示',
				options: [{
					label: '显示',
					value: 1
				}, {
					label: '隐藏',
					value: 0
				}],
				watch: (nValue, oValue, { items }) => {
					items['demo3-2'].vShow = !!nValue
					items['demo3-3'].vShow = !!nValue
				}
			}),
			area3.jsInput({
				label: '受控组件1',
				name: 'demo3-2'
			}),
			area3.jsInput({
				label: '受控组件2',
				name: 'demo3-3'
			})
		)

		// ============================
		const area4 = tree.initArea({
			title: '表单组件72变',
		})
		const { input, select, timePicker } = this.$mapping.J_tags[this.ui];
		const componentConfig = {
			timePicker: {
				is: timePicker,
				label: '时间选择器',
				placeholder: '请选择时间'
			},
			input: {
				is: input,
				label: '输入框',
				placeholder: '请输入内容'
			},
			select: {
				is: select,
				label: '下拉框',
				placeholder: '请选择内容'
			}
		}

		area4.add(
			area4.jsSelect({
				label: '显示切换',
				name: 'demo4-1',
				placeholder: '改变 原输入框 为其他组件',
				options: [{
					label: '时间选择器',
					value: 'timePicker'
				}, {
					label: '输入框',
					value: 'input'
				}, {
					label: '下拉框',
					value: 'select'
				}],
				watch: (nValue, oValue, { items, values, handlers }) => {
					//清空值
					values['demo4-2'] = '';
					//受控下拉对象
					const component = handlers['demo4-2'];
					//覆盖新组件参数
					Object.assign(items['demo4-2'], componentConfig[nValue])
					if (nValue === 'select') {
						//由于下拉框不是传统的属性变化而是子对象的重新更新，此处单独处理
						component.node = area4.getOption(component, [{
							label: '选项一',
							value: 'a'
						}, {
							label: '选项二',
							value: 'b'
						}])
					} else {
						component.node = []
					}
				},
			}),
			area4.jsInput({
				is: input,
				label: '原输入框',
				name: 'demo4-2'
			})
		)
		// ============================
		const area5 = tree.initArea({
			title: '下拉组件内容替换',
		});
		const opt1 = [{
			label: '切换1-1',
			value: 1
		}, {
			label: '切换1-2',
			value: 2
		}]
		const opt2 = [{
			label: '切换2-1',
			value: 1
		}, {
			label: '切换2-2',
			value: 2
		}]

		area5.add(
			area5.jsSelect({
				label: '显示切换',
				name: 'demo5-1',
				placeholder: '切换 受控下拉 的下拉数据',
				options: [{
					label: '空数据',
					value: ''
				}, {
					label: '选项一',
					value: 1
				}, {
					label: '选项二',
					value: 2
				}],
				watch: (nValue, oValue, { values, handlers }) => {
					let options = []
					//清空值
					values['demo5-2'] = '';
					//受控下拉对象
					const component = handlers['demo5-2'];
					if (nValue) options = nValue === 1 ? opt1 : opt2;
					component.node = area4.getOption(component, options)
				}
			}),
			area5.jsSelect({
				label: '受控下拉',
				name: 'demo5-2'
			})
		)

		const area6 = tree.initArea({
			title: '级联组件内容替换',
		});
		area6.add(
			area6.jsSelect({
				label: '显示切换',
				name: 'demo6-1',
				placeholder: '切换 受控级联 的下拉数据',
				options: [{
					label: '空数据',
					value: ''
				}, {
					label: '级联一',
					value: 1
				}, {
					label: '级联二',
					value: 2
				}],
				watch: (nValue, oValue, { values, items }) => {
					const fieldData = { 'element': 'options', 'iview': 'data' } [this.ui];
					//清空值
					values['demo6-2'] = [];
					//受控级联代理对象
					const param = items['demo6-2'];
					if (nValue === 1) {
						param[fieldData] = [{
							value: '1-1',
							label: '第一级',
							children: [{
								value: '2-1',
								label: '第一级第一条',
							}, {
								value: '2-2',
								label: '第一级第二条',
							}]
						}, {
							value: '1-2',
							label: '第二级',
							children: [{
								value: '2-1',
								label: '第二级第一条',
							}, {
								value: '2-2',
								label: '第二级第二条',
							}]
						}]
					} else if (nValue === 2) {
						param[fieldData] = [{
							value: '1-1',
							label: '顶层级一',
							children: [{
								value: '2-1',
								label: '顶层一子层一',
							}, {
								value: '2-2',
								label: '顶层一子层二',
							}]
						}, {
							value: '1-2',
							label: '顶层级二',
							children: [{
								value: '2-1',
								label: '顶层二子层一',
							}, {
								value: '2-2',
								label: '顶层二子层二',
							}]
						}]
					} else {
						param[fieldData] = []
					}
				},
			}),
			area6.jsCascader({
				label: '受控级联',
				name: 'demo6-2',
				//element-ui 字段
				options: [],
				//iview 使用字段
				data: []
			})
		)
	}
}
